<!--
 * @Description:
 * @Author: dh
 * @Date: 2021-09-29 10:35:59
 * @LastEditors: dh
 * @LastEditTime: 2023-01-03 10:18:01
-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<style>
		img {
			width: 200px;
		}

		.box {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
	</style>

	<body>
		<!--
        blur()：模糊图像
        brightness() ：让图像更明亮或更暗淡
        contrast()：增加或减少图像的对比度
        drop-shadow(x偏移, y偏移, 模糊大小, 色值)：在图像后方应用投影 如 drop-shadow(1px 1px 15px rgba(0, 0, 0, .5));
        grayscale()：将图像转为灰度图,也可用于网页置灰
        hue-rotate()：改变图像的整体色调
        invert()：反转图像颜色
        opacity()：改变图像透明度
        saturate()：超饱和或去饱和输入的图像
        sepia()：将图像转为棕褐色
     -->

		<div class="box">
			<div class="left">
				<div>
					<span>原图</span>
					<img src="../assets/img/girl.png" alt="" />
				</div>
				<div>
					<span> blur 模糊</span>
					<img style="filter: blur(3px)" src="../assets/img/girl.png" alt="" />
				</div>
				<div>
					<span> brightness 变亮或暗</span>
					<img style="filter: brightness(200%)" src="../assets/img/girl.png" alt="" />
				</div>
				<div>
					<span>contrast 调整图像的对比度</span>
					<img style="filter: contrast(200%)" src="../assets/img/girl.png" alt="" />
				</div>
				<div>
					<span>drop-shadow 给图像设置一个阴影效果:</span>
					如果图片背景不是透明的就在盒子外围
					<img style="filter: drop-shadow(0px 0px 5px red)" src="../assets/img/girl.png" alt="" />
				</div>
				<div>
					如果图片背景是透明的效果就在图案上
					<img src="../assets/img/fire.png" alt="" />
					<img style="filter: drop-shadow(0 0 2px blue)" src="../assets/img/fire.png" alt="" />
				</div>
				<div>
					<span>grayscale 将图像转换为灰度图像:可继承</span>
					<img style="filter: grayscale(100%)" src="../assets/img/girl.png" alt="" />
				</div>
			</div>
			<div class="right">
				<div>
					<span>hue-rotate 给图像应用色相旋转: </span>
					<img style="filter: hue-rotate(90deg)" src="../assets/img/girl.png" alt="" />
				</div>
				<div>
					<span>invert 反转输入图像: </span>
					<img style="filter: invert(100%)" src="../assets/img/girl.png" alt="" />
				</div>
				<div>
					<span>opacity 转化图像的透明程度: </span>
					<img style="filter: opacity(50%)" src="../assets/img/girl.png" alt="" />
				</div>
				<div>
					<span>saturate 转换图像饱和度 </span>
					<img style="filter: saturate(800%)" src="../assets/img/girl.png" alt="" />
				</div>
				<div>
					<span>sepia 将图像转换为深褐色: </span>
					<img style="filter: sepia(100%)" src="../assets/img/girl.png" alt="" />
				</div>
				<div>
					<span>复合函数 </span>
					<img style="filter: contrast(200%) brightness(150%) hue-rotate(90deg)" src="../assets/img/girl.png" alt="" />
				</div>
			</div>
		</div>
	</body>
</html>
